<style>
	.good-name {
		line-height: 34px;
	}
	
	/* @media screen and (min-width: 1514px) {
		.len-short {width: 80px!important;}
	} */
	@media screen and (max-width: 1330px) {
		.len-short {width: 100px!important;}
	}
	#rule_list .layui-input {display: inline-block;}
	.layui-table[lay-size=lg] td, .layui-table[lay-size=lg] th {padding: 15px;}
	.align-right {text-align: right;}
	.align-center {text-align: center!important;}
	.line-height {line-height: 45px;}
	input[disabled] {background-color: #F5F5F5;}
</style>

<!-- <div class="layui-collapse tips-wrap">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>链动商层级与后台配置有关，最多三级链动。</li>
			<li>链动商等级与链动商的链动订单数，链动订单总额，自购订单数，自购订单总额，链动商下线人数，链动商的下级链动商人数有关。</li>
			<li>商品链动总佣金不得超过商品实际价格的50%。</li>
		</ul>
	</div>
</div> -->

<div class="layui-form">
	<div class="layui-card card-common">
		<div class="layui-card-header">
			<span class="card-title">商品信息</span>
		</div>
		<div class="layui-card-body">
			<div class="layui-form-item goods-image-wrap">
				<label class="layui-form-label">商品图片：</label>
				<div class="layui-input-block">
					<div class="js-goods-image"><img layer-src src="{:img($goods_info.goods_image[0],'small')}" width="50px" alt="商品图片" title="商品图片"/></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称：</label>
				<div class="layui-input-inline good-name">{$goods_info.goods_name}</div>
			</div>
		</div>
	</div>

	<div class="layui-card card-common">
		<div class="layui-card-header">
			<span class="card-title">佣金设置</span>
		</div>
		
		<div class="layui-card-body">
			<div class="layui-form-item goods-image-wrap">
				<label class="layui-form-label">是否参与链动：</label>
				<div class="layui-input-block">
					<input type="radio" name="is_lian" value="1" title="参与" lay-filter="is_lian" {if $goods_info['is_lian'] == 1 }checked{/if}>
					<input type="radio" name="is_lian" value="0" title="不参与" lay-filter="is_lian" {if $goods_info['is_lian'] == 0 }checked{/if}>
				</div>
			</div>
			<div class="word-aux">
				<p>设置参与链动时，链动会按照如下规则进行计算，如果有链动计算价则链动计算价优先。链动 = 销售价*对应链动等级比例 / 链动 = 链动计算价*对应链动等级比例</p>
			</div>

			<div class="layui-form-item goods-image-wrap {if $goods_info['is_lian'] == 0}layui-hide{/if}" id="lian_price">
				<label class="layui-form-label">链动计算价格：</label>
				<div class="layui-input-block">
					<table class="layui-table" lay-skin="line">
						<colgroup>
							<col width="40%">
							<col width="20%">
							<col width="20%">
							<col width="20%">
						</colgroup>
						<thead>
							<tr>
								<th>商品规格</th>
								<th>销售价</th>
								<th>成本价</th>
								<th class="align-center">链动计算价</th>
							</tr>
						</thead>
						<tbody>
							{foreach $goods_info['sku_data'] as $sku}
							<tr>
								<td>
									<div class="line-hiding">{$sku.goods_name ?? $sku.sku_name}</div>
									<div style="color:#B2B2B2;">{$sku.spec_name ?? ''}</div>
								</td>
								<td>{$sku.discount_price ?? $sku.price}</td>
								<td>{$sku.cost_price}</td>
								<td class="align-center">
									<input type="number" name="lian_price[{$sku.sku_id}]" class="layui-input len-short input-rate" value="{$sku.lian_price}" style="display: inline-block;" placeholder="请输入链动计算价" title="链动计算价"> 元
								</td>
							</tr>
							{/foreach}
						</tbody>
					</table>
				</div>
				<div class="word-aux">
					<p>未设置链动计算价以该商品实付金额来计算链动，设置后以该价格来计算链动。</p>
				</div>
			</div>

			<div class="layui-form-item " id="is_rule">
				<label class="layui-form-label">佣金规则：</label>
				<div class="layui-input-inline good-name">
					<input type="radio" name="is_rule" value="1" title="默认规则" lay-filter="is_rule" {if $goods_info['is_rule'] == 1 }checked{/if}>
					<input type="radio" name="is_rule" value="2" title="单独设置" lay-filter="is_rule" {if $goods_info['is_rule'] == 2 }checked{/if}>
				</div>
			</div>
			
			<div class="layui-form-item" id="reward_settings">
				<label class="layui-form-label">奖励设置：</label>
				<div class="layui-input-block">
					<table class="layui-table" lay-skin="line" id="reward_table">
						<thead>
							<tr>
								<th>规格</th>
								<th>价格</th>
								<th>成本价</th>
								{foreach $lian_level as $level}
									<th>{$level.level_name}</th>
								{/foreach}
							</tr>
						</thead>
						<tbody>
						{foreach $goods_info['sku_data'] as $sku}
							<tr>
								<td>{$sku.goods_name ?? $sku.sku_name}</td>
								<td>{$sku.discount_price ?? $sku.price}</td>
								<td>{$sku.cost_price}</td>
								{foreach $lian_level as $level}
								<td>
									<div style="margin-bottom: 8px;">
										<label style="font-size:12px;display:block;margin-bottom:3px;">直推奖</label>
										<div>
											<input type="number" step="0.01" min="0" name="reward_set[{$sku.sku_id}][{$level.level_id}][recommend_rate]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['recommend_rate'] ?? ''}" 
											class="layui-input len-short input-rate reward-input" style="width:60px;display:inline-block;" 
											placeholder="比例" title="直推奖比例" 
											onchange="toggleRewardInput(this, 'recommend_money_{$sku.sku_id}_{$level.level_id}')"> % 或
											<input id="recommend_money_{$sku.sku_id}_{$level.level_id}" type="number" step="0.01" min="0" 
											name="reward_set[{$sku.sku_id}][{$level.level_id}][recommend_money]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['recommend_money'] ?? ''}" 
											class="layui-input len-short input-money reward-input" style="width:60px;display:inline-block;" 
											placeholder="金额" title="直推奖金额" 
											onchange="toggleRewardInput(this, 'reward_set[{$sku.sku_id}][{$level.level_id}][recommend_rate]')"> 元
										</div>
									</div>
									<div style="margin-bottom: 8px;">
										<label style="font-size:12px;display:block;margin-bottom:3px;">见点奖</label>
										<div>
											<input type="number" step="0.01" min="0" name="reward_set[{$sku.sku_id}][{$level.level_id}][see_rate]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['see_rate'] ?? ''}" 
											class="layui-input len-short input-rate reward-input" style="width:60px;display:inline-block;" 
											placeholder="比例" title="见点奖比例" 
											onchange="toggleRewardInput(this, 'see_money_{$sku.sku_id}_{$level.level_id}')"> % 或
											<input id="see_money_{$sku.sku_id}_{$level.level_id}" type="number" step="0.01" min="0" 
											name="reward_set[{$sku.sku_id}][{$level.level_id}][see_money]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['see_money'] ?? ''}" 
											class="layui-input len-short input-money reward-input" style="width:60px;display:inline-block;" 
											placeholder="金额" title="见点奖金额" 
											onchange="toggleRewardInput(this, 'reward_set[{$sku.sku_id}][{$level.level_id}][see_rate]')"> 元
										</div>
									</div>
									<div style="margin-bottom: 8px;">
										<label style="font-size:12px;display:block;margin-bottom:3px;">感恩奖</label>
										<div>
											<input type="number" step="0.01" min="0" name="reward_set[{$sku.sku_id}][{$level.level_id}][cultivate_rate]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['cultivate_rate'] ?? ''}" 
											class="layui-input len-short input-rate reward-input" style="width:60px;display:inline-block;" 
											placeholder="比例" title="感恩奖比例" 
											onchange="toggleRewardInput(this, 'cultivate_money_{$sku.sku_id}_{$level.level_id}')"> % 或
											<input id="cultivate_money_{$sku.sku_id}_{$level.level_id}" type="number" step="0.01" min="0" 
											name="reward_set[{$sku.sku_id}][{$level.level_id}][cultivate_money]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['cultivate_money'] ?? ''}" 
											class="layui-input len-short input-money reward-input" style="width:60px;display:inline-block;" 
											placeholder="金额" title="感恩奖金额" 
											onchange="toggleRewardInput(this, 'reward_set[{$sku.sku_id}][{$level.level_id}][cultivate_rate]')"> 元
										</div>
									</div>
									<div style="margin-bottom: 8px;">
										<label style="font-size:12px;display:block;margin-bottom:3px;">平级奖</label>
										<div>
											<input type="number" step="0.01" min="0" name="reward_set[{$sku.sku_id}][{$level.level_id}][equal_rate]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['equal_rate'] ?? ''}" 
											class="layui-input len-short input-rate reward-input" style="width:60px;display:inline-block;" 
											placeholder="比例" title="平级奖比例" 
											onchange="toggleRewardInput(this, 'equal_money_{$sku.sku_id}_{$level.level_id}')"> % 或
											<input id="equal_money_{$sku.sku_id}_{$level.level_id}" type="number" step="0.01" min="0" 
											name="reward_set[{$sku.sku_id}][{$level.level_id}][equal_money]" 
											value="{$goods_info.reward_set[$sku.sku_id][$level.level_id]['equal_money'] ?? ''}" 
											class="layui-input len-short input-money reward-input" style="width:60px;display:inline-block;" 
											placeholder="金额" title="平级奖金额" 
											onchange="toggleRewardInput(this, 'reward_set[{$sku.sku_id}][{$level.level_id}][equal_rate]')"> 元
										</div>
									</div>
								</td>
								{/foreach}
							</tr>
						{/foreach}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	<div class="single-filter-box">
		<div class="form-row">
			<button class="layui-btn" lay-submit lay-filter="save">保存</button>
			<button class="layui-btn layui-btn-primary" onclick="backLianGoodsList()">返回</button>
		</div>
		<input type="hidden" name="goods_id" value="{$goods_info.goods_id}" />
	</div>
</div>

<script>
	// 使用HTML注释方式获取PHP变量值
	var is_rule = parseInt('{$goods_info.is_rule|default=0}'), 
	    is_lian = parseInt('{$goods_info.is_lian|default=0}');
	
	// 更新奖励表格的启用/禁用状态
	function updateRewardTableState() {
		// 如果不参与链动，或者使用默认规则，则禁用奖励设置
		if (is_lian != 1 || is_rule != 2) {
			$('.reward-input').attr('disabled', true);
		} else {
			// 否则启用奖励设置
			$('.reward-input').attr('disabled', false);
			
			// 重新应用比例和金额的互斥逻辑
			$('.input-rate').each(function() {
				var value = $(this).val();
				if(value && value > 0) {
					var targetId = $(this).attr('onchange').split("'")[1];
					var targetInput;
					
					if(targetId.indexOf('[') > -1) {
						targetInput = $('input[name="' + targetId + '"]');
					} else {
						targetInput = $('#' + targetId);
					}
					
					targetInput.attr('disabled', true);
				}
			});
			
			$('.input-money').each(function() {
				var value = $(this).val();
				if(value && value > 0) {
					var targetSelector = $(this).attr('onchange').split("'")[1];
					$('input[name="' + targetSelector + '"]').attr('disabled', true);
				}
			});
		}
	}
	
	// 页面加载完成后初始化奖励设置的启用状态
	$(function() {
		// 根据是否参与链动和佣金规则设置奖励表格的启用状态
		updateRewardTableState();
	});
	
	if (is_rule == 1) {
		$(".layui-input").removeAttr("lay-verify");
	}
	
	// 切换奖励输入框状态（比例和金额互斥）
	function toggleRewardInput(input, targetId) {
		var value = $(input).val();
		var targetInput;
		
		// 如果targetId是选择器，直接使用
		if(targetId.indexOf('[') > -1) {
			targetInput = $('input[name="' + targetId + '"]');
		} else {
			// 否则按ID查找
			targetInput = $('#' + targetId);
		}
		
		if(value && value > 0) {
			// 当前输入框有值，禁用目标输入框
			targetInput.attr('disabled', true);
			targetInput.val('');
		} else {
			// 当前输入框无值，启用目标输入框
			targetInput.attr('disabled', false);
		}
	}
	
	// 页面加载时初始化互斥状态
	$(function() {
		// 处理所有比例输入框
		$('.input-rate').each(function() {
			var value = $(this).val();
			if(value && value > 0) {
				// 获取对应的金额输入框ID或选择器
				var targetId = $(this).attr('onchange').split("'")[1];
				var targetInput;
				
				if(targetId.indexOf('[') > -1) {
					targetInput = $('input[name="' + targetId + '"]');
				} else {
					targetInput = $('#' + targetId);
				}
				
				// 禁用金额输入框
				targetInput.attr('disabled', true);
			}
		});
		
		// 处理所有金额输入框
		$('.input-money').each(function() {
			var value = $(this).val();
			if(value && value > 0) {
				// 获取对应的比例输入框选择器
				var targetSelector = $(this).attr('onchange').split("'")[1];
				
				// 禁用比例输入框
				$('input[name="' + targetSelector + '"]').attr('disabled', true);
			}
		});
	});
	
	layui.use(['form'], function() {
		var form = layui.form,
		repeat_flag = false;
		form.render();

		$(".layui-input").each(function() {
			$(this).on('input', function(){
				var _this = $(this);
				if(Number($(_this).val()) > 0){
					$(this).parent().siblings().find("input").attr('disabled', true);
					$(this).parent().siblings().find("input").removeAttr("lay-verify");
				} else {
					$(this).parent().siblings().find("input").attr('disabled', false);
					$(this).parent().siblings().find("input").attr("lay-verify", "required|flnum");
				}
			});
		});
		
		// 是否参与链动
		form.on("radio(is_lian)", function (data) {
			if (data.value == 1) {
				$("#is_rule,#lian_price,#default_rule").removeClass("layui-hide");
				$(".layui-input").removeAttr("lay-verify");
			} else {
				$("#is_rule,#lian_price,#default_rule").addClass("layui-hide");
				$(".layui-input").attr("lay-verify", "required|flnum");
			}
		});

		// 佣金规则
		form.on("radio(is_rule)", function (data) {
			is_rule = data.value;
			updateRewardTableState();
		});

		/**
		 * 表单提交
		 */
		form.on('submit(save)', function(data){
			if(repeat_flag) return;
			repeat_flag = true;
			$.ajax({
				type: 'POST',
				dataType: 'JSON',
				url: ns.url("lian://shop/goods/config"),
				data: data.field,
				async: false,
				success: function(res){
					repeat_flag = false;
					if (res.code == 0) {
						layer.msg('操作成功');
					}else{
						layer.msg(res.message);
					}
				}
			})
		});
		
		/**
		 * 表单验证
		 */
		form.verify({
			required: function (value) {
				// if (value.trim() == '' || value < 0) {
				// if (value.trim() == '') {
				// 	return '奖励比例不能为空，且必须大于0!';
				// }
			},
			flnum: function (value) {
				var arrMen = value.split(".");
				var val = 0;
				if (arrMen.length == 2) {
					val = arrMen[1];
				}
				if (val.length > 2) {
					return "佣金比例最多可保留两位小数";
				}
			}
		});
	});
	
	function backLianGoodsList() {
		location.hash = ns.hash("lian://shop/goods/lists");
	}
</script>
